<template>
  <v-snackbar
    v-model="snackbar"
    multi-line
    :style="{ bottom: `90%` }"
    timeout="1000"
    @click="snackbar = false"
    :color="color"
  >
    <v-icon left>{{ text_ico }}</v-icon> {{ text }}
  </v-snackbar>
  <v-layout class="rounded rounded-md">
    <v-app-bar title="RPC"></v-app-bar>

    <v-main style="max-height: 600px">
      <v-card flat title="查询">
        <template v-slot:text>
          <v-text-field
            v-model="search"
            label="Search"
            prepend-inner-icon="mdi-magnify"
            single-line
            variant="outlined"
            hide-details
          ></v-text-field>
        </template>
        <v-table fixed-header height="600px" density="compact">
          <thead>
            <tr>
              <th class="text-left">标题</th>
              <th class="text-left">网站</th>
              <th class="text-left">时间</th>
              <th class="text-left">状态</th>
              <th class="text-left">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in desserts" :key="item._id">
              <td class="text-warp">{{ item.task_id }}</td>
              <td class="text-warp">
                {{ item.url }}
              </td>
              <td style="width: 150px"></td>
              <td style="width: 100px">{{ item.status }}</td>
              <td style="width: 100px">
                <v-icon small tile @click="editUser(item)">mdi-pencil</v-icon>
                <v-icon small tile @click="deleteUser(item)">mdi-delete</v-icon>
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-card>
    </v-main>
  </v-layout>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      desserts: [],
      snackbar: false,
      text: ``,
      color: "success",
      text_ico: "mdi-check-circle",
    };
  },
  methods: {
    alertmsg(t, ico, c) {
      if (ico === undefined) {
        ico = "mdi-check-circle";
      }
      if (c === undefined) {
        c = "success";
      }
      this.color = c;
      this.text = t;
      this.text_ico = ico;
      this.snackbar = true;
    },
    async get_data(url = null, data = null) {
      axios
        .post(url, data) // 发送GET请求到后端API
        .then((response) => {
          this.desserts = response.data.data;
          this.alertmsg(response.data.msg);
        })
        .catch((error) => {
          // 处理请求错误
          this.alertmsg(error.response.data.msg, "mdi-cancel", "error");
          this.code = "";
          this.outvalue = "";
        });
    },
  },
  mounted() {
    this.get_data("/api/rpc/task/list", {});
  },
};
</script>
<style>
.text-warp {
  width: 250px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
